<template>
  <view
    class="juan"
    :style="{ backgroundColor: num == 1 ? 'white' : '#F5F5F5' }"
    style="padding-bottom: 150rpx"
  >
    <!-- <view style="padding-bottom: 400rpx;"> -->
    <view class="Nav flexBox">
      <view
        :class="num == index ? 'borderbotton' : 'borderbotton_unselect'"
        v-for="(item, index) in NavList"
        :key="index"
        @click="NavBtn(index)"
        >{{ item }}</view
      >
    </view>
    <view
      v-if="num == 0"
      class="header"
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx 0 30rpx;
      "
    >
      <view
        >使用中<text
          style="
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 28rpx;
            color: #999999;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
          >(可用余额{{ totalBalance }})</text
        >
      </view>
      <view
        style="display: flex; justify-content: center; align-items: center"
        @click="openSortView"
      >
        <text style="margin-right: 12rpx">{{
          sortTypeArray[selectSortIndex]
        }}</text>
        <image
          src="@/static/images/arrowUp.png"
          mode="scaleToFill"
          style="width: 20rpx; height: 12rpx"
        />
      </view>
    </view>

    <view
      class="sort_box"
      v-if="isShowSelectSortView"
      @click.stop="isShowSelectSortView = false"
    >
      <view style="background-color: white">
        <view
          class="sort_box_item"
          v-for="(item, index) in sortTypeArray"
          :key="index"
          @click.stop="
            isShowSelectSortView = false;
            selectSortIndex = index;
            myCard(false);
          "
        >
          <text style="flex-grow: 1">{{ item }}</text>
          <uni-icons
            v-if="selectSortIndex == index"
            type="checkmarkempty"
            color="#EB5327"
          ></uni-icons>
        </view>
      </view>
    </view>

    <view
      v-show="num == 0"
      class="ticket"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <!--v-if="dataList.length" dataList-->
      <view>
        <view class="ticketFace">
          <image
            class="card-icon"
            src="@/static/images/kaquan.png"
            style="width: 45px; height: 45px"
            alt="Icon"
          ></image>
          <view class="card-info">
            <view class="card-title">{{ item.card_name }}</view>
            <view class="balanceText available" style="display: flex">
              可用余额
              <image
                @click.stop="zhengyan(item.company_id)"
                style="width: 26rpx; height: 18rpx; margin-left: 20rpx"
                v-if="!item.showBallance"
                src="@/static/images/zhengyan.png"
              />
              <image
                @click.stop="biyan(item.company_id)"
                style="width: 26rpx; height: 18rpx; margin-left: 20rpx"
                v-else
                src="@/static/images/biyan1.png"
                mode="scaleToFill"
              />
            </view>

            <text
              class="amount"
              style="height: 20px"
              :class="{ fontSize: !item.showBallance }"
              >{{
                item.showBallance ? "￥" + item.available_amount : "****"
              }}</text
            >
            <view class="otherBalance">
              <view class="balanceText otherBalance1" style="margin-right: 28px"
                >兑换余额
                <text class="amount">{{
                  item.showBallance ? "￥" + item.available_exh_amount : "****"
                }}</text>
              </view>
              <view class="balanceText otherBalance1"
                >充值余额
                <text class="amount">{{
                  item.showBallance ? "￥" + item.available_rec_amount : "****"
                }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="ticketBottom">
          <view
            class="ticketBottom_add_line"
            @click="
              lookCardListCompany_id = item.company_id;
              lookCardListData();
            "
            >明细</view
          >
          <view
            class="ticketBottom_add_line"
            @click="
              lookCardListCompany_id = item.company_id;
              open(true, item.company_id, item.card_name);
            "
            >充值
          </view>
          <view v-show="!item.show" @click="zhankai(item.company_id)"
            >展开↓</view
          >
          <!-- {{ item.company_id }}{{ item.show }} -->
          <view v-show="item.show" @click="shouqi(item.company_id)">收起↑</view>
        </view>
        <view
          v-show="item.show"
          class="kaquanDetail"
          v-for="k in item.list"
          :style="{
            opacity: k.used_status == 3 || k.available_amount == 0 ? 0.4 : 1,
          }"
        >
          <image
            style="margin-right: 10px"
            src="@/static/images/kaquan.png"
          ></image>
          <view style="display: flex; flex-direction: row; align-items: center">
            <view
              style="
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                width: 10px;
              "
            >
              <text>{{ k.sn }}</text>
              <text style="font-size: 10px"
                >有效期至：{{ k.used_expire_datetime2 }}</text
              >
            </view>

            <image
              v-if="k.used_status == 3"
              style="width: 36px; height: 36px; margin-right: 5px"
              src="../../static/images/card_exp.png"
            ></image>

            <view
              style="
                display: flex;
                flex-direction: column;
                align-items: flex-end;
              "
            >
              <text>￥{{ k.available_amount }}</text>
              <text style="font-size: 10px"
                >{{ k.exh_datetime.substring(0, 10) }}兑换</text
              ><!-- exh_datetime -->
            </view>
          </view>
        </view>
        <view
          v-show="item.show"
          @click="shouqi(item.company_id)"
          class="shouqikaquanxinxi"
        >
          收起卡券信息
          <image src="@/static/images/arrowUp.png" mode="scaleToFill" />
        </view>
      </view>
    </view>
    <!-- 使用记录 -->
    <view v-show="num == 1">
      <view
        style="background-color: #fff"
        class="kaquanDetail jilu"
        v-for="(item, index) in shiyongjiluList || 3"
      >
        <view>
          <view class="top1 jilu" style="font-size: 16px"
            >{{ item.card_name }}
            <text
              style="font-size: 16px"
              :class="{ needRed: item.opt_type == 1 }"
              >{{ item.opt_type == 1 ? "+" : "-"
              }}{{ item.change_amount }}</text
            >
          </view>
          <view class="bottom1 jilu" style="font-size: 13px; margin-top: 5px">
            订单号 {{ item.order_sn }}
            <text>余额 {{ item.amount }} </text>
          </view>
          <view style="font-size: 13px; color: #999999">{{
            item.description
          }}</view>
          <view style="font-size: 13px; color: #999999">{{
            item.add_datetime
          }}</view>
        </view>
      </view>
      <view v-show="num == 1" class="None" v-if="shiyongjiluList.length <= 0">
        <image
          style="width: 100%"
          :src="`${picUrl}/InfoNull.png`"
          mode="widthFix"
        ></image>
      </view>
    </view>

    <view v-show="num == 0" class="duihuanButton" @click="open(false)"
      >消费卡兑换</view
    >

    <view v-show="num == 0" class="None" v-if="dataList.length <= 0">
      <image
        style="width: 100%"
        :src="`${picUrl}/InfoNull.png`"
        mode="widthFix"
      ></image>
    </view>

    <!-- <button @click="open">打开弹窗</button> -->
    <uni-popup ref="popup" type="dialog">
      <view
        style="
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #fff;
          width: 658rpx;
          border-radius: 20rpx;
          height: 500rpx;
        "
      >
        <uni-forms
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            width: 100%;
            height: 100%;
            align-items: center;
          "
          :modelValue="formData"
        >
          <view class="form-title" style="height: 52rpx">{{
            isChongzhi ? "充值" : "消费卡兑换码"
          }}</view>
          <view style="width: 100%; box-sizing: border-box; padding: 0 30rpx">
            <uni-forms-item
              v-if="isChongzhi"
              style="width: 100%"
              label="姓名"
              name="kaming"
            >
              <input
                disabled
                style="
                  height: 104rpx;
                  background-color: #f5f5f5;
                  margin-bottom: 20rpx;
                  border-radius: 12rpx;
                  padding-left: 30rpx;
                  font-size: 30rpx;
                "
                type="text"
                v-model="formData.name"
                placeholder-style="fontSize:30rpx;color:#CCC"
                placeholder="请输入姓名"
              />
            </uni-forms-item>
            <uni-forms-item
              v-if="isChongzhi"
              style="width: 100%"
              label="年龄"
              name="chongzhijine"
            >
              <input
                style="
                  height: 104rpx;
                  background-color: #f5f5f5;
                  border-radius: 12rpx;
                  padding-left: 30rpx;
                  font-size: 30rpx;
                  font-weight: 400;
                "
                placeholder-style="fontSize:30rpx;color:#CCC"
                type="text"
                v-model="formData.chongzhijine"
                placeholder="请输入充值金额"
              />
            </uni-forms-item>
            <uni-forms-item
              v-if="!isChongzhi"
              style="width: 100%"
              label="兑换码"
              name="duihaunma"
            >
              <input
                style="
                  height: 104rpx;
                  background-color: #f5f5f5;
                  border-radius: 12rpx;
                  padding-left: 30rpx;
                  font-size: 30rpx;
                  font-weight: 400;
                  margin-bottom: 20rpx;
                "
                placeholder-style="fontSize:30rpx;color:#CCC"
                type="text"
                v-model="formData.duihuanma"
                placeholder="请输入消费卡兑换码"
              />
            </uni-forms-item>
            <uni-forms-item
              v-if="!isChongzhi"
              style="width: 100%"
              label="兑换密码"
              name="duihaunmima"
            >
              <input
                type="password"
                style="
                  height: 104rpx;
                  background-color: #f5f5f5;
                  border-radius: 12rpx;
                  padding-left: 30rpx;
                  font-size: 30rpx;
                  font-weight: 400;
                "
                placeholder-style="fontSize:30rpx;color:#CCC"
                v-model="formData.duihuanmima"
                placeholder="请输入兑换密码"
              />
            </uni-forms-item>
          </view>
          <button
            style="
              width: 400rpx;
              height: 80rpx;
              background-color: #eb5327;
              border-radius: 100rpx;
              font-size: 32rpx;
              color: #ffffff;
              text-align: center;
              line-height: 80rpx;
            "
            @click="submitForm"
          >
            立即{{ isChongzhi ? "充值" : "兑换" }}
          </button>
        </uni-forms>
        <image
          @click="close"
          src="@/operation/static/images/close.png"
          style="width: 60rpx; height: 60rpx; margin: 60rpx 300rpx"
        />
      </view>
    </uni-popup>
  </view>
  <!-- </view> -->
</template>

<script>
import { globalData } from "../../globalData";
const msdjs = require("@/common/api_sign/md5.js");
const CryptoJS = require("crypto-js");
export default {
  data() {
    return {
      // key:uni.getStorageSync('key'),
      curpage: 1,
      hasmore: false,
      cardid: "",
      storeOrplatform: "",
      platformType: "",
      ididid: "",
      iskaquan: 1, //判断卡券
      shaixuanFlag: false,
      dhtkFlag: false,
      morenFlag: false,
      duihuanliangFlag: false,
      duihuanliangFlag2: true,
      jifenzhiFlag: true,
      jifenzhiFlag2: true,
      whethergot1: true,
      whethergot2: false,
      whethergot3: false,
      whethergot4: false,
      dataList: [],
      NavList: ["卡券中心", "变更明细"],
      num: 0,
      voucher_state: 1,
      showInfo: false,
      isChongzhi: true,
      sortTypeArray: ["默认排序", "按余额高到低", "按余额低到高"],
      selectSortIndex: 0,
      isShowSelectSortView: false,
      lookCardListCompany_id: null, //点击卡券的明细要跳转去查询明细列表
      totalBalance: "",
      formData: {
        name: "皖集采卡片名称示范",
        chongzhijine: undefined,
        company_id: undefined,
        // kahao:undefined,
        duihuanma: undefined,
        duihuanmima: undefined,
      },
      shiyongjiluList: [],
    };
  },
  onLoad() {
    this.myCard();
  },
  onShow() {
    if ("rechargeSuccessJumpToList" == globalData.pageShowValue) {
      //lookCardListCompany_id 在点击充值会赋值
      this.lookCardListData();
    }
    globalData.pageShowValue = null;
  },
  methods: {
    zhengyan(company_id) {
      this.dataList.forEach((item) => {
        item.company_id === company_id
          ? this.$set(item, "showBallance", true)
          : "";
      });
    },
    lookCardListData() {
      this.dataList = [];
      this.num = 1;
      this.curpage = 1;
      this.myCard(false, this.lookCardListCompany_id);
    },
    openSortView() {
      this.isShowSelectSortView = !this.isShowSelectSortView;
    },
    biyan(company_id) {
      this.dataList.forEach((item) => {
        item.company_id === company_id
          ? this.$set(item, "showBallance", false)
          : "";
      });
    },
    zhankai(company_id, curpageValue, array) {
      //递归调用所有数据
      if (curpageValue == null) {
        this.dataList.forEach((item) => {
          // console.log(typeof item.company_id,typeof company_id,item.company_id === company_id);
          item.company_id === company_id ? this.$set(item, "show", true) : "";
          // console.log(item.show ? true : false);
        });
      }

      let params = {
        key: uni.getStorageSync("key"),
        company_id: company_id,
      };
      if (curpageValue != null) {
        params.curpage = curpageValue;
      }
      this.$util
        .request({
          url: "/mobile/index.php?act=member_rechargecard&op=exchange_record",
          method: "get",
          data: params,
        })
        .then((res) => {
          console.log(res.datas);
          //递归调用
          let hasmore = res.datas.paged.hasmore;
          if (hasmore) {
            if (array == null) {
              array = res.datas.list;
            } else {
              array.push(...res.datas.list);
            }
            this.zhankai(company_id, (curpageValue || 1) + 1, array);
          } else {
            this.dataList.forEach((item) => {
              // console.log(typeof item.company_id,typeof company_id,item.company_id === company_id);
              item.company_id === company_id
                ? this.$set(item, "list", array || res.datas.list)
                : console.log(123);
              // console.log(item.show ? true : false);
            });
          }
        });
    },
    shouqi(company_id) {
      this.dataList.forEach((item) => {
        console.log(
          typeof item.company_id,
          typeof company_id,
          item.company_id === company_id
        );
        item.company_id === company_id ? (item.show = false) : console.log(123);
        console.log(item.show ? true : false);
      });
    },
    duihuan() {
      const password = this.formData.duihuanmima;
      this.$util
        .request({
          url: "/mobile/index.php?act=member_rechargecard&op=exchange",
          method: "post",
          data: {
            key: uni.getStorageSync("key"),
            sn: this.formData.duihuanma,
            password:
              password == undefined || password.length == 0
                ? ""
                : msdjs.hexMD5(password),
          },
        })
        .then((res) => {
          // if(res.datas.voucher_list.length == 0){
          // 	uni.showToast({
          // 		title:"没有数据哟～",
          // 		icon:"none"
          // 	})
          // }
          console.log(212, res);
          if (res.error_code == 0) {
            uni.showToast({
              title: "兑换成功",
              icon: "none",
            });
          } else {
            uni.showToast({
              title: "兑换失败，请检查兑换码和兑换密码是否正确",
              icon: "none",
            });
          }
          this.$refs.popup.close();
          this.myCard();
        });
      this.formData = {};
    },
    chongzhi() {
      console.log(this.formData);
      this.$refs.popup.close();
      this.$util
        .request({
          url: "/mobile/index.php?act=member_rechargecard&op=rechange_order",
          method: "post",
          data: {
            key: uni.getStorageSync("key"),
            company_id: this.formData.company_id,
            amount: this.formData.chongzhijine,
          },
        })
        .then((res) => {
          if (res.error_code == 0) {
            console.log(res.datas);
            uni.navigateTo({
              url: `../../plug/pay/cashier?pay_sn=${res.datas.pay_sn}&type=card`,
            });
            this.formData.chongzhijine = "";
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
            this.formData.chongzhijine = "";
          }
        });
    },
    submitForm() {
      console.log(this.formData);
      if (this.isChongzhi) {
        // 充值逻辑
        if (isNaN(+this.formData.chongzhijine)) {
          uni.showToast({
            title: "请输入合规数字！",
            icon: "none",
          });
        } else {
          console.log(this.formData.chongzhijine);
          this.chongzhi();
        }
      } else {
        // todo兑换
        console.log(this.formData);
        this.duihuan();
      }
    },
    open(isChongzhi, company_id, kaming) {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.isChongzhi = isChongzhi;
      this.formData.name = kaming;
      console.log(company_id);
      this.formData.company_id = company_id;
      this.$refs.popup.open("top");
    },
    close() {
      this.$refs.popup.close();
    },
    ToDeta(voucher_id) {
      uni.navigateTo({
        url: "info?voucher_id=" + voucher_id,
      });
    },
    NavBtn(index) {
      //如果切换就不是查看卡片明细了
      this.lookCardListCompany_id = null;
      this.dataList = [];
      this.num = index;
      this.curpage = 1;
      switch (this.num) {
        case 0:
          this.voucher_state = 1;
          break;
        case 1:
          this.voucher_state = 2;
          break;
        case 2:
          this.voucher_state = 3;
          break;
        // case 3:
        //   this.voucher_state=4
        //    break;
      }
      this.myCard();
    },
    myCard(isLoardMore, company_id) {
      if (this.num == 1) {
        console.log("num=1");

        let params = {
          key: uni.getStorageSync("key"),
        };
        if (company_id != null) {
          params["company_id"] = company_id;
        }

        this.$util
          .request({
            url: "/mobile/index.php?act=member_rechargecard&op=used_record",
            method: "get",
            data: params,
          })
          .then((res) => {
            console.log(res);
            this.shiyongjiluList = res.datas?.list;
            this.hasmore = res.datas?.paged?.hasmore;
          });
      } else {
        // 排序 0默认 1余额降序 2余额升序
        this.$util
          .request({
            url: "/mobile/index.php?act=member_rechargecard&op=list",
            method: "get",
            data: {
              key: uni.getStorageSync("key"),
              sort: this.selectSortIndex,
            },
          })
          .then((res) => {
            // if(res.datas.voucher_list.length == 0){
            // 	uni.showToast({
            // 		title:"没有数据哟～",
            // 		icon:"none"
            // 	})
            // }
            this.totalBalance = res.datas.total_amount;
            if (isLoardMore) {
              this.dataList = this.dataList.concat(res.datas.voucher_list);
            } else {
              this.dataList = res.datas.list;
              console.log(this.dataList);
            }
            this.hasmore = res.datas.paged.hasmore;
          });
      }
    },
    onReachBottom() {
      if (this.hasmore) {
        this.curpage++;
        this.myCard(true, this.lookCardListCompany_id);
      } else {
        uni.showToast({
          title: "已是最后一页！",
          icon: "none",
        });
      }
    },
    hidden() {
      this.shaixuanFlag = !this.shaixuanFlag;
    },
    hidden2() {
      this.dhtkFlag = !this.dhtkFlag;
    },

    gotTicket(
      store_id,
      voucher_t_range,
      voucher_t_rangeid,
      gc_name,
      is_more_goods,
      voucher_t_id
    ) {
      var that = this;
      if (is_more_goods == 1) {
        uni.navigateTo({
          url: "/operation/voucher/productsLists?voucher_t_id=" + voucher_t_id,
        });
      } else {
        if (voucher_t_range == 0) {
          if (store_id) {
            uni.navigateTo({
              url: "/mall/store/store?store_id=" + store_id,
            });
          } else {
            uni.switchTab({
              url: "/main/home/index",
            });
          }
        } else if (voucher_t_range == 1) {
          //商品
          if (voucher_t_rangeid) {
            uni.navigateTo({
              url:
                "/mall/goods/info?goods_id=" + voucher_t_rangeid.split(",")[0],
            });
          }
        } else if (voucher_t_range == 2) {
          //分类
          uni.navigateTo({
            url:
              "/mall/goods/list?thirdid=" +
              voucher_t_rangeid +
              "&index=" +
              gc_name,
          });
        }
      }
    },
  },
};
</script>

<style>
.fontSize {
  font-size: 40rpx;
}

.juan {
  /* height: 100%; */
  min-height: 100%;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.sort_box {
  background-color: #00000080;
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: 1;
}

.sort_box_item {
  display: flex;
  padding: 10px 0;
  margin: 0 10px;
  align-items: center;
  border-bottom: 0.5px solid #e5e5e5;
}

.flexBox {
  display: flex;
  justify-content: space-between;
}

.Nav view {
  width: 50%;
  text-align: center;
  line-height: 50px;
  background-color: #fff;
}

.header {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 44px;
  height: 44px;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.borderbotton {
  border-bottom: 4rpx solid #ff4300;
  color: #eb5327;
}

.borderbotton_unselect {
  border-bottom: 4rpx solid #f5f5f5;
  color: #eb5327;
}

.mt55mb30 {
  margin-top: 55upx;
  margin-bottom: 30upx;
}

.Cfff {
  color: #ffffff;
}

.Cfe0000 {
  color: #ff4300;
}

.w21h31 {
  width: 21upx;
  height: 25upx;
  position: relative;
  top: 6upx;
  left: 5upx;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-around;
}

.paddingL20 {
  padding-left: 20upx;
}

.C999 {
  color: #999;
}

.Cff0101 {
  color: #ff0101;
}

.Cc00251 {
  color: #c00251;
}

.strick {
  text-decoration: line-through;
}

.Cfe0000 {
  color: #ff4300;
}

.line1 {
  width: 430upx;
}

.hide {
  display: none;
}

.marginB20 {
  margin-bottom: 20upx;
}

.twoline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pl20 {
  padding-left: 20upx;
}

.positionT {
  position: relative;
  top: 50upx;
}

.paddingB15 {
  padding-bottom: 15upx;
}

.borderB {
  border-bottom: 1px solid #f4f4f6;
}

.borderT {
  border-top: 1px solid #f4f4f6;
}

.gl {
  position: absolute;
  right: 30upx;
}

.pr30 {
  padding-right: 30upx;
}

.C333 {
  color: #333333;
}

.C666 {
  color: #666666;
}

.Cf00 {
  color: #ff0000;
}

.bold {
  font-weight: bold;
}

.C1d1d1d {
  color: #1d1d1d;
}

.fs30 {
  font-size: 30upx;
}

.fs26 {
  font-size: 26upx;
}

.fs28 {
  font-size: 28upx;
}

.fs30 {
  font-size: 28upx;
}

.fs24 {
  font-size: 24upx;
}

.fs20 {
  font-size: 20upx;
}

.fs22 {
  font-size: 22upx;
}

.fs21 {
  font-size: 21upx;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.tac {
  text-align: center;
}

uni-page-body {
  background-color: #ffffff;
  color: rgb(102, 102, 102);
}

.top {
  padding: 0 20upx;
  height: 80upx;
  line-height: 80upx;
  background-color: #fff;
}

.commonTop {
  height: 80upx;
  line-height: 80upx;
  text-align: center;
}

.sortway {
  width: 170upx;
}

.sort {
  width: 450upx;
}

.topRight {
  text-align: center;
  width: 90upx;
  height: 80upx;
  line-height: 80upx;
}

.topRight image {
  position: relative;
  top: 12upx;
}

.flex > view {
  padding: 0 35upx;
}

.ticket {
  background: #fff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  position: relative;
  margin: 30rpx 30rpx 0;
  /* 		display: flex;
		justify-content: space-between;
		align-items: center; */
  padding: 20rpx 40rpx 0 20rpx;
}

.ticketFace {
  display: flex;
  width: 100%;
  padding-left: 20rpx;
  background-image: url("@/static/images/xiaofeikabeijing.png");
}

.card-icon {
  width: 90rpx;
  height: 90rpx;
  margin: 20rpx 20rpx 0 0;
}

.card-info {
  display: flex;
  height: 270rpx;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
  margin-top: 15px;
  margin-bottom: 15px;
}

.card-title {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.available {
  display: flex;
  flex-direction: column;
}

.available .amount {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 40rpx;
  color: #353535;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.otherBalance {
  display: flex;
}

.balanceText {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.balanceText,
.otherBalance1 {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.otherBalance1 .amount {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 24rpx;
  color: #333333;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.ticketBottom {
  width: 100%;
  display: flex;
  flex: 1;
  justify-content: space-between;
}

.ticketBottom view {
  margin: 16rpx 0;
}

.ticketBottom view {
  width: 33%;
  text-align: center;
}

.ticketBottom_add_line {
  border-right: 0.5px solid #e5e5e5;
}

.kaquanDetail {
  display: flex;
  padding: 20rpx;
  margin: 12rpx 12rpx 12rpx 0;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}

.kaquanDetail.jilu {
  margin: 0 20rpx 0 20rpx;
  /* height: 166rpx; */
  box-sizing: border-box;
  border-bottom: 1px solid rgb(245, 245, 245);
}

.kaquanDetail image {
  width: 72rpx;
  height: 72rpx;
}

.kaquanDetail > view {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kaquanDetail > view > view {
  display: flex;
  justify-content: space-between;
}

.top1 {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.bottom1 {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 20rpx;
  color: #999999;
  line-height: 36rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.shouqikaquanxinxi {
  display: flex;
  margin-bottom: 22rpx;
  justify-content: center;
  align-items: center;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  line-height: 36rpx;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.shouqikaquanxinxi image {
  width: 20rpx;
  height: 12rpx;
}

.duihuanButton {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform-origin-x: 50%;
  width: 690rpx;
  height: 88rpx;
  background-color: #eb5327;
  text-align: center;
  line-height: 88rpx;
  border-radius: 100rpx;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 32rpx;
  color: #ffffff;
}

.active1 {
  background-color: #ff4300;
  color: #ffffff;
}

/* 筛选 */
.sxMask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100000;
}

.innerMask {
  width: 598upx;
  height: 1192upx;
  background-color: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100000;
}

.innerMask2 {
  width: 598upx;
  height: 1192upx;
  background-color: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100000;
}

.innerMaskTop {
  padding: 0 28upx;
  height: 83upx;
  line-height: 83upx;
  background-color: #fafafa;
  font-size: 21upx;
}

.sx {
  width: 30upx;
  height: 30upx;
  position: relative;
  top: 8upx;
  left: 5upx;
}

.innerMaskBottom {
  width: 100%;
  position: absolute;
  height: 80upx;
  bottom: 0;
  left: 0;
}

.innerMaskBottom button {
  height: 80upx;
  line-height: 80upx;
  width: 50%;
  border: none;
  outline: none;
  border-radius: 0;
}

.innerMaskBottom1 {
  background-color: #d2d2d2;
  color: #666666;
  font-size: 21upx;
}

.innerMaskBottom2 {
  background-color: #ff4300;
  color: #ffffff;
  font-size: 21upx;
}

.sxInput {
  width: 240upx;
  height: 70upx;
  background-color: #f0f0f0;
  border-radius: 5upx;
}

.sxblx {
  width: 60upx;
  height: 60upx;
  line-height: 60upx;
  text-align: center;
  color: #666;
}

.innerMask2 {
  width: 610upx;
  height: 350upx;
  background-color: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  margin: 500upx auto;
  padding-top: 60upx;
  z-index: 100000;
}

.innerMask2Bs {
  width: 380upx;
  margin: 60upx auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.innerMask2Bs button {
  width: 160upx;
  height: 60upx;
  border: none;
  outline: none;
}

.innerMask2B1 {
  background-color: #ff4300;
  color: #ffffff;
}

.innerMask2B2 {
  background-color: #f0f0f0;
  color: #666666;
  border-color: #f0f0f0;
}

.ticketC {
  width: 150rpx;
  height: 60rpx;
  background: linear-gradient(134deg, #ea8c1e 0%, #e84a1d 100%);
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  font-size: 20rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 60rpx;
}

.ticketP {
  font-size: 80rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #e96a1d;
}

.ticketP span {
  font-size: 40rpx;
}

.ticketM {
  font-size: 30rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #323232;
}

.ticketD {
  font-size: 20rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #e96a1d;
}

.ticketE {
  width: 108.37rpx;
  height: 108.37rpx;
  position: absolute;
  left: 0;
  top: 0;
}

.ticketF {
  width: 192rpx;
  height: 144rpx;
}

.shiyong {
  color: #909090;
}

.None {
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.form-title {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 40rpx;
  color: #333333;
  line-height: 36rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.needRed {
  color: red;
}
</style>